<script setup lang="ts">
import type { FormInst, FormRules } from 'naive-ui'
import { loginService } from '@/apis/login'
import { useUserStore } from '@/stores'
import { getStorage, setStorage } from '@/utils/storage'
// 使用消息提示
const message = useMessage()

// 定义响应式变量,加载状态
const loading = ref(false)

// 使用路由
const router = useRouter()

const userStore = useUserStore()

// 定义表单实例
const formRef = ref<FormInst | null>(null)

// 定义表单数据
const formValue = reactive({
  username: '',
  password: '',
})

// 导入一些公共校验规则
const commonRules = useRules()

// 定义表单校验规则
const rules: FormRules = {
  username: commonRules.required,
  password: commonRules.required,
}
// 处理登录逻辑
const handleLogin = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate(async errors => {
    if (!errors) {
      loading.value = true
      const res = await loginService(formValue).finally(() => {
        loading.value = false
      })
      message.success('登录成功')
      // 将token存储到本地
      userStore.setToken(res.data.token)
      // 这里默认都是记住密码先
      setStorage('username', formValue.username)
      setStorage('password', formValue.password)
      // 这里添加登录逻辑
      router.push('/')
    } else {
      message.error('请正确填写表单')
    }
  })
}

// 处理注册逻辑
const handleRegister = () => {
  message.info('注册功能尚未实现')
}

onMounted(() => {
  // 获取本地存储的用户名和密码
  const username = getStorage('username')
  const password = getStorage('password')
  if (username && password) {
    formValue.username = username
    formValue.password = password
  }
})

// 将消息提示挂载到全局
window.$message = message
</script>

<template>
  <div class="login-container">
    <div class="glow-circle"></div>
    <div class="glow-circle secondary"></div>
    <n-card class="login-card">
      <h1 class="login-title">LOGIN</h1>
      <n-form ref="formRef" :model="formValue" :rules="rules">
        <n-form-item path="username">
          <n-input
            v-model:value="formValue.username"
            placeholder="账号"
            :input-props="{ autocomplete: 'username' }"
            clearable
          />
        </n-form-item>
        <n-form-item path="password">
          <n-input
            v-model:value="formValue.password"
            type="password"
            placeholder="密码"
            show-password-on="click"
            :input-props="{ autocomplete: 'current-password' }"
            clearable
          />
        </n-form-item>
        <n-button
          type="primary"
          block
          @click="handleLogin"
          class="rounded-1"
          :loading="loading"
          >登 录</n-button
        >
      </n-form>
      <div class="register-link">
        <span class="text-black">没有账号？</span>
        <n-button text @click="handleRegister" class="c-#00ffff">
          立即注册
        </n-button>
      </div>
    </n-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(120deg, #1a1a2e, #2d2d44);
  position: relative;
  overflow: hidden;
}

.glow-circle {
  position: absolute;
  width: 700px;
  height: 700px;
  background-color: #00ffff;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  bottom: -25%;
  right: -25%;
}

.glow-circle.secondary {
  width: 400px;
  height: 400px;
  background-color: #ff00ff;
  top: -10%;
  left: -10%;
  opacity: 0.1;
}

.login-card {
  width: 450px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  z-index: 10;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.5rem;
  color: white;
}

.register-link {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
}

:deep(.n-card-header) {
  padding-top: 0;
}

:deep(.n-card__content) {
  padding-top: 0;
}

:deep(.n-input) {
  background-color: transparent;
}
:deep(.n-input--focus) {
  background-color: transparent !important;
}

:deep(.n-input__input-el) {
  color: white;
}

:deep(.n-input__placeholder) {
  color: rgba(255, 255, 255, 0.5);
}

:deep(.n-input__border, .n-input__state-border) {
  border: none;
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

:deep(.n-input:hover .n-input__border, .n-input:hover .n-input__state-border) {
  border-bottom: 1px solid rgba(0, 255, 255, 0.5);
}

:deep(.n-input:focus .n-input__border, .n-input:focus .n-input__state-border) {
  border-bottom: 1px solid #00ffff;
}

:deep(.n-button--primary-type) {
  background-color: #00ffff;
  border-color: #00ffff;
  color: #1a1a2e;
}

:deep(.n-button--primary-type:hover) {
  background-color: rgba(0, 255, 255, 0.8);
  border-color: rgba(0, 255, 255, 0.8);
}

:deep(.n-button--text) {
  color: #00ffff;
}

:deep(.n-button--text:hover) {
  color: rgba(0, 255, 255, 0.8);
}
</style>
